<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>底部导航</title>
    <link rel="stylesheet" type="text/css" href="../../css/api1.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style1.css"/>
    <style>
        header{ background-color: #f2f2f2; }
        header ul li { height: 50px; line-height: 50px; text-align: center; display: none; color: #323237; position: relative;font-size: 18px;  }
        header ul li.active{ display: block; }
        #footer{  background-color: #f2f2f2;}
        #footer ul li{  padding-top: 30px; padding-bottom: 8px; background: url() no-repeat center 2px; background-size: 25px 25px; text-align: center; }
        #footer ul li.active{ color: #000; }
				#footer ul li:nth-child(1){ background-image: url(../../icon/message.png); }
				#footer ul li:nth-child(2){ background-image: url(../../icon/approve.png); }
				#footer ul li:nth-child(3){ background-image: url(../../icon/oppose.png); }
				#footer ul li:nth-child(4){ background-image: url(../../icon/collect.png); }
				#footer ul li:nth-child(1).active{ background-image: url(../../icon/message.png); }
				#footer ul li:nth-child(2).active{ background-image: url(../../icon/agreechousen.png); }
				#footer ul li:nth-child(3).active{ background-image: url(../../icon/oppose.png); }
				#footer ul li:nth-child(4).active{ background-image: url(../../icon/collect.png); }
				.flex-con{
          overflow: scroll;
        }
        .fixed_bottom {
           position:fixed;
           left:0px;
           bottom:0px;
           width:100%;
           height:7%;
           z-index:10;
        }
        .fixed_top {
           position:fixed;
           left:0px;
           top:0px;
           width:100%;
           height:7%;
           z-index:10;
        }
        .header-box {
          position: relative;
          width: 100%;
          height: 100%;
          background-color: #ffffff
        }
        header {
          width: 100%;
          height: 100%;
          background-color: #ffffff;
          z-index: 10;

        }
        header .left {
          position: absolute;
          top: 15px;
          width: 21.5px;
          height: 15.5px;
          left: 15px;
          background-image: url(../../icon/back.png);
          background-size: 21.5px 15.5px;
          background-position: center center;
          background-repeat: no-repeat;
        }
        header .right {
          position: absolute;
          top: 15px;
          width: 5px;
          height: 19px;
          right: 15px;
          background-image: url(../../icon/more.png);
          background-size: 5px 19px;
          background-position: center center;
          background-repeat: no-repeat;
        }
        .title {
          /*border: 1px solid red;*/
          position: relative;
          width: 100%;
          height: auto;
          bottom: auto;
          padding-left: 24px;
          padding-top: 24px;
          padding-right: 24px;
          box-sizing: border-box;
          font-size: 18px; color: #000000; text-align: left;
        }
        .tag {
          /*border-bottom: 1px solid #d3d2d2;*/
          /*border: 1px solid blue;*/
          position: relative;
          width: 100%;
          height: 82px;
          bottom: auto;
          padding-left: 24px;
          padding-top: 10px;
          box-sizing: border-box;
          font-size: 12px; color: #917dcf; text-align: left;
        }
				.answer {
          /*border: 1px solid red;*/
          position: relative;
					margin-top: 15%;
          width: 100%;
          height: auto;
          font-size: 15px; color: #000000; text-align:justify;
        }
        .replyer {
          /*border: 1px solid red;*/
          width: 100%;
          height: 36px;
          background-color: #fff;
          padding-top: 0px;
        }
        .replyer-left {
          width: 36px;
          height: auto;
          float: left;
          padding-left: 24px;
        }
        .replyer-imag {
          width: 36px;
          height: 36px;
        }
        .replyer-imag img {
          width: 36px;
          height: 36px;
          border-radius: 18px;
        }
        .replyer-right {
          /*border: 1px solid blue;*/
          width: 180px;
          height: auto;
          float: left;
        }
        .replyer-name {
          width: auto;
          height: 16px;
          font-size: 16px; color: #000000; text-align: left;
          padding-left: 8px
        }
        .replyer-note {
          width: auto;
          height: 14px;
          font-size: 12px; color: #8e8e8e; text-align: left;
          padding-top: 10px;
          padding-left: 8px
        }
        .replyer .follow {
          /*border: 1px solid blue;*/
          width: 78px;
          height: 30px;
          float: right;
          margin-right: 24px;
          background-color: #6d7cd9;
          border-radius: 4px;
          font-size: 16px; color: #fff; text-align: center;
          line-height: 30px;
        }

        .answer .content-body {
          padding-left: 24px;
          padding-right: 24px;
          padding-top: 36px;
          font-size: 16px; color: #fff; text-align: left;
					margin-bottom: 8%;
        }

				.resouce {
					position: relative;
					width: 100%;
					height: 10%;
					background-color: #FFF;
				}
        .resource-left {
          width: 36px;
          height: auto;
          float: left;
          padding-left: 24px;
        }
        .resource-imag {
          width: 36px;
          height: 36px;
					border-radius: 4px;
					background-color: #6d7cd9;
					font-size: 16px; color: #fff; text-align: center;
					line-height: 36px;
        }
        .resource-right {
          /*border: 1px solid blue;*/
          width: 50%;
          height: auto;
          float: left;
        }
        .resource-name {
          width: auto;
          height: 18px;
          font-size: 18px; color: #000000; text-align: left; font-weight: bold;
          padding-left: 8px
        }
        .resource-note {
          width: auto;
          height: 14px;
          font-size: 11px; color: #8e8e8e; text-align: left;
          padding-top: 10px;
          padding-left: 8px;
					float: left;
        }






    </style>
</head>
<body>
<div id="wrap" class="flex-wrap flex-vertical">

    <div id="main">
			<div class="fixed_top">
      <header id="header" class="header-box">
        <div class="left" onclick="back()"></div>
        <div class="center"></div>
      </header>
      </div>
    </div>

    <div class="answer" onclick="">
      <div class="replyer">
        <div class="replyer-left">
          <div class="replyer-imag">
            <img src="../../image/09-014416_603.jpg" alt="">
          </div>
        </div>
        <div class="replyer-right">
          <div class="replyer-name">我是一只大橙子</div>
          <div class="replyer-note">UI问题优秀回答者</div>
        </div>
        <div id="follow_logo" class="follow" onclick="change_follow()">+关注</div>
      </div>

      <div id='answer_content' class="content-body">
        <p>当代社会中层年轻人刚好是计划生育赶上的一代，家中大人溺爱至极，当代社会中层年轻人刚好是计划生育赶上的一代，家中大人溺爱至极，当代社会中层年轻人刚好是计划生育赶上的一代，家中大人溺爱至极，</p>
        <p>当代社会中层年轻人刚好是计划生育赶上的一代，家中大人溺爱至极，当代社会中层年轻人刚好是计划生育赶上的一代，家中大人溺爱至极，当代社会中层年轻人刚好是计划生育赶上的一代，家中大人溺爱至极，</p>
<p>当代社会中层年轻人刚好是计划生育赶上的一代，家中大人溺爱至极，当代社会中层年轻人刚好是计划生育赶上的一代，家中大人溺爱至极，当代社会中层年轻人刚好是计划生育赶上的一代，家中大人溺爱至极，</p>
      </div>

			<div class="resource">
        <div class="resource-left">
          <div id="resource-type" class="resource-imag">
						PDF
          </div>
        </div>
        <div class="resource-right">
          <div id="resource-name" class="resource-name">高数习题集详解</div>
          <div class="resource-note">继续预览</div>
					<div class="resource-note" onclick="download_resource()">点击下载</div>
        </div>
      </div>
    </div>
		<div id="footer" class="fixed_bottom">
        <ul class="flex-wrap" >
            <li tapmode="hover" onclick="open_comment()" class="flex-con active" ></li>
            <li tapmode="hover" onclick="approve(this)" class="flex-con" ></li>
            <li tapmode="hover" onclick="disapprove(this)" class="flex-con" ></li>
            <li tapmode="hover" onclick="collect( this )" class="flex-con" ></li>
        </ul>
    </div>
</div>
</body>
</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/jquery.js"></script>
<script type="text/javascript" src="../../script/dropload.min.js"></script>
<script type="text/javascript">
var json_dict = {
"app_version":"",
"user_id":"",
"user_cookie":"",
"question_id":123,
"answer_id":123,
"since_id": 0,
"page_size": 10
};
var json_data= {};

		    apiready = function () {

		      var main = $api.byId('header');
		      var title = $api.byId('title');
		      var footer = $api.byId('footer');

		      var header_H = $api.offset(header).h;
		      var footer_H = $api.offset(footer).h;
		      var footer_T = $api.offset(footer).t;
		      Getdata(json_dict);
		      json_data.answer_content = '现在的年轻人啊!现在的年轻人啊现在的年轻人啊现在的年轻人啊现在的年轻人啊现在的年轻人啊';
		      json_data.like_num = 12;
		      json_data.dislike_num = 13;
		      json_data.comm_num = 7;
					json_data.collect_num = 123;
					json_data.resouce_type = 1; //1-pdf 2-zip 3-rar
		      question_view();
		    }

		    function Getdata(json) {
		      $.ajax({
		        type: "post",
		        url: "../../questionAnswer/getComment/",
		          dataType : "json",
		          data: JSON.stringify(json),
		          success: function (d) {
		          json_data = d; //是否需要将json转化为{}才能赋给json_data?
		        }
		      });
		    }

		    function question_view() {
					if (json_data.resouce_type == 1) {
						document.getElementById('resource-type').innerHTML == 'PDF';
						document.getElementById('resource-type').setAttribute('background-color','#6d7cd9');
					}
					else if (json_data.resouce_type == 2) {
						document.getElementById('resource-type').innerHTML == 'ZIP';
						document.getElementById('resource-type').setAttribute('background-color','#6d7cd9');
					}
					else if (json_data.resouce_type == 3) {
						document.getElementById('resource-type').innerHTML == 'RAR';
						document.getElementById('resource-type').setAttribute('background-color','#6d7cd9');
					}

					document.getElementById('answer_content').childNodes[1].innerHTML = json_data.answer_content;
		      document.getElementById('footer').childNodes[1].childNodes[1].innerHTML = json_data.comm_num;
		      document.getElementById('footer').childNodes[1].childNodes[3].innerHTML = json_data.like_num;
		      document.getElementById('footer').childNodes[1].childNodes[5].innerHTML = json_data.dislike_num;
					document.getElementById('footer').childNodes[1].childNodes[7].innerHTML = json_data.collect_num;
				}

		    function approve(tag) {
		      if(  $api.hasCls(tag,'active') ) {
		        $api.removeCls(tag, 'active');
		        document.getElementById('footer').childNodes[1].childNodes[3].innerHTML = parseInt(document.getElementById('footer').childNodes[1].childNodes[3].innerHTML) - 1 ;

		      }
		      else {
		        $api.addCls(tag, 'active');
		        document.getElementById('footer').childNodes[1].childNodes[3].innerHTML = parseInt(document.getElementById('footer').childNodes[1].childNodes[3].innerHTML) + 1 ;
		      };
		      }

		    function disapprove(tag) {
		      if( $api.hasCls(tag,'active') ) {
		              $api.removeCls(tag, 'active');
		              document.getElementById('footer').childNodes[1].childNodes[5].innerHTML = parseInt(document.getElementById('footer').childNodes[1].childNodes[5].innerHTML) - 1 ;

		            }
		      else {
		              $api.addCls(tag, 'active');
		              document.getElementById('footer').childNodes[1].childNodes[5].innerHTML = parseInt(document.getElementById('footer').childNodes[1].childNodes[5].innerHTML) + 1 ;
		            };
		      }

					function collect(tag) {
						if( $api.hasCls(tag,'active') ) {
			              $api.removeCls(tag, 'active');
			              document.getElementById('footer').childNodes[1].childNodes[7].innerHTML = parseInt(document.getElementById('footer').childNodes[1].childNodes[7].innerHTML) - 1 ;

			            }
			      else {
			              $api.addCls(tag, 'active');
			              document.getElementById('footer').childNodes[1].childNodes[7].innerHTML = parseInt(document.getElementById('footer').childNodes[1].childNodes[7].innerHTML) + 1 ;
			            };
					}


    function open_comment() {
      api.openFrame({
                name: 'comment',
                url: './comment_box.html',
                rect: {
                        x:0,
                        y:0,
                        w:api.winWidth,
                        h:api.winHeight
                },
          pageParam: {
              question_id:1,
              answer_id: 1,
              user_id: 'e3b3dc8d20b7052f5c0799f3aa4e9f3e',
              type:"question"
          },
                bgColor: 'rgba(0,0,0,0.6)',
                // bounces: false,
    });
  }

	function change_follow() {
		var flag;
		if (document.getElementById('follow_logo').innerHTML == '+关注') {
			flag = 1; //表示关注动作
			document.getElementById('follow_logo').innerHTML = '取消关注';
		}
		else {
			flag = 0; //表示取消关注动作
			document.getElementById('follow_logo').innerHTML = '+关注';
		}

	}

	function download_resource() {

	}


    function back() {
      api.openWin({
          name: 'home',
          url: '../../index.html',
          pageParam: {
              name: 'test'
          }
      });
    }

</script>
